
import * as React from 'react'
import { View } from '@tarojs/components'
import { ReactPullLoad, STATS } from './ReactPullLoad'
type Prop = {
    /**滚动方向，默认垂直滚动 */
    scrollY?: boolean,
    /**控制刷新状态，默认没有 */
    refreshState?: RefreshState,
    /**上啦刷新 */
    onHeaderRefresh?: () => void,
    /**下拉加载 */
    onFooterRefresh?: () => void,
    onEmptyRefresh?: () => React.ReactNode,

    reload?: Function,
    children: React.ReactNode,
    /**内容器样式 */
    style?: React.CSSProperties,
    /**内容器样式 */
    containerStyle?: React.CSSProperties
}

export enum RefreshState {
    Idle = 1000,
    HeaderRefreshing = 1001,
    FooterRefreshing = 1002,
    NoMoreData = 1003,
    Failure = 1004,
    EmptyData = 1005,
    None = 1006,
}


export default (props: Prop) => {
    const {
        refreshState = RefreshState.None,
        onHeaderRefresh,
        onFooterRefresh,
        style,
        containerStyle = { display: 'flex', flexDirection: 'column' },
    } = props
    const [action, setAction] = React.useState<STATS>(STATS.init)
    const [hasMore, setHasMore] = React.useState<boolean>(true)
    React.useEffect(() => {
        switch (refreshState) {
            case RefreshState.HeaderRefreshing:
                setHasMore(true)
                setAction(STATS.refreshing)
                break;
            case RefreshState.FooterRefreshing:
                setHasMore(true)
                setAction(STATS.loading)
                break;
            case RefreshState.Idle:
                setHasMore(true)
                setAction(STATS.loading)
                onFooterRefresh && onFooterRefresh()
                break;
            case RefreshState.NoMoreData:
            case RefreshState.Failure:
            case RefreshState.None:
            case RefreshState.EmptyData:
                setAction(STATS.reset)
                setHasMore(false)
                break;
            default: break;
        }

    }, [refreshState])


    const hasSubViewsByEmptyDs = () => {
        return props.children == undefined ||
            (props.children instanceof Array && props.children?.length == 0) ||
            (props.children instanceof Array && (props.children?.length == 2 && props.children[0] instanceof Array && props.children[1] == false) && props.children[0]?.length == 0)
    }


    // console.log('action', action, 'refreshState', refreshState, props.children,)

    return (
        <ReactPullLoad
            isBlockContainer={true}
            downEnough={150}
            action={action}
            hasMore={hasMore}
            distanceBottom={1000}
            style={style}
            handleAction={e => {
                if (action == e) return;
                if (action == STATS.refreshing) return;
                if (action == STATS.loading) return;
                if (action == STATS.init && e == STATS.loading) return;
                if (action == STATS.reset && e == STATS.loading) return;
                // console.log('handleAction', e, action, refreshState)
                setHasMore(true)
                setAction(e)

                /**下拉刷新 */
                if (e == STATS.refreshing) {
                    onHeaderRefresh && onHeaderRefresh()
                }
                //干拉
                if (e == STATS.pulling && hasSubViewsByEmptyDs()) {
                    setHasMore(false)
                    setAction(STATS.reset)
                }

                /**上拉加载 */
                if (e == STATS.loading) {
                    onFooterRefresh && onFooterRefresh()
                }


            }}
            FooterNode={e => {
                // console.log('FooterNode', e, refreshState)
                if (e.hasMore == false) {
                    if (refreshState == RefreshState.EmptyData) {
                        if (props.onEmptyRefresh) return props.onEmptyRefresh()
                        return <View style={styles.refreshText}>暂无数据～</View>
                    }
                    if (refreshState == RefreshState.Failure) return <View style={styles.refreshText}>服务器正在出小差，请稍后重试～</View>
                    if (refreshState == RefreshState.NoMoreData) return <View style={styles.refreshText}>已经全部加载完毕</View>
                }

                return ''
            }}
        >
            <View style={containerStyle}>
                {props.children}
            </View>
        </ReactPullLoad>
    )

}


const styles: Record<string, React.CSSProperties> = {
    refreshText: {
        fontSize: '13px',
        color: '#DAD7DA',
        height: '44px',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center'
    }
}
